• Montage4

    J'ai proposé de placer des images en horizontal (800x600px) et en vertical (600x800px), dans un montage de ce type; en voilà un exemple.

    Survolez les vignettes.

    Dans le cas de vignettes horizontales et et verticales, il faut trouver le bon compromis de taille pour que les verticales ne semblent pas trop étroites par rapport aux horizontales.

    De plus, il est plus sage de placer les vignettes verticales vers le centre afin que le curseur ne sorte pas de dessus à l'agrandissement.

    Code.
    <div id="fdb"><img id="v1" src="http://ekladata.com/epUp6f3YpFQUNRtpwMo8lkmnzDg/26.jpg" alt="" /> <img id="v2" src="http://ekladata.com/eE71WsPGToqt5LQvWWZMo806hqU/01.jpg" alt="" /> <img id="v3" src="http://ekladata.com/cFG1PchDfIT2MtGyjY4DIMtgmRM/94.jpg" alt="" /> <img id="v4" src="http://ekladata.com/vkGKKO-x8AFWAVRmx4BTCP_k2So/84.jpg" alt="" /> <img id="v5" src="http://ekladata.com/rL6nYDtB48fTHgGFvA5tXITraIE/82.jpg" alt="" />
    <p id="comm">Votre petit mot</p>
    </div>
    <style><!--
    #fdb{width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 8px black; margin:10px auto; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/graysand.jpg'); }
    #comm{position:absolute; transform:translate(100px,20px); width:600px; text-align:center; font-size:12pt;}
    #v1{ transition:all 1s linear; position:absolute; transform:translate(50px,480px); width:160px; height:120px;}
    #v2{ transition:all 1s linear; position:absolute; transform:translate(240px,480px); width:90px; height:120px;}
    #v3{ transition:all 1s linear; position:absolute; transform:translate(360px,480px); width:90px; height:120px;}
    #v4{ transition:all 1s linear; position:absolute; transform:translate(480px,480px); width:90px; height:120px;}
    #v5{ transition:all 1s linear; position:absolute; transform:translate(600px,480px); width:160px; height:120px;}
     #v1:hover{width:800px; height:600px; transform:translate(0px,0px); z-index:5;}
     #v2:hover{width:450px; height:600px; transform:translate(175px,0px); z-index:5;}
     #v3:hover{width:450px; height:600px; transform:translate(175px,0px); z-index:5;}
     #v4:hover{width:450px; height:600px; transform:translate(175px,0px); z-index:5;}
     #v5:hover{width:800px; height:600px; transform:translate(0px,0px); z-index:5;}
    --></style>
    ...